<script setup>

</script>

<template>
  <section id="features" aria-label="Features for investing all your money" class="bg-gray-900 py-20 sm:py-32">
    <div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
      <div class="mx-auto max-w-2xl lg:mx-0 lg:max-w-3xl"><h2
          class="text-3xl font-medium tracking-tight text-white">智能同步，全渠道无缝管理</h2>
        <p class="mt-2 text-lg text-gray-400">
          稻客AI云租系统实现了与各大OTA平台的自动同步，涵盖房源、房态、房价和订单管理。管家端智能化调度任务，确保高效运营；租客端个性化推荐房源和便捷预订，提升入住体验；房东端通过实时数据和智能定价，优化管理，实现收益最大化。三端整合，加上全渠道无缝同步，为租赁业务带来全方位的智能提升</p>
      </div>
    </div>
    <div class="mt-16 md:hidden">
      <div
          class="-mb-4 flex snap-x snap-mandatory -space-x-4 overflow-x-auto overscroll-x-contain scroll-smooth pb-4 [scrollbar-width:none] sm:-space-x-6 [&amp;::-webkit-scrollbar]:hidden">
        <div class="w-full flex-none snap-center px-4 sm:px-6">
          <div class="relative transform overflow-hidden rounded-2xl bg-gray-800 px-5 py-6">
            <div class="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2">
              <svg viewBox="0 0 558 558" width="558" height="558" fill="none" aria-hidden="true">
                <defs>
                  <linearGradient id=":R1b57qfja:" x1="79" y1="16" x2="105" y2="237" gradientUnits="userSpaceOnUse">
                    <stop stop-color="#13B5C8"></stop>
                    <stop offset="1" stop-color="#13B5C8" stop-opacity="0"></stop>
                  </linearGradient>
                </defs>
                <path opacity=".2"
                      d="M1 279C1 125.465 125.465 1 279 1s278 124.465 278 278-124.465 278-278 278S1 432.535 1 279Z"
                      stroke="#13B5C8"></path>
                <path d="M1 279C1 125.465 125.465 1 279 1" stroke="url(#:R1b57qfja:)" stroke-linecap="round"></path>
              </svg>
            </div>
            <div class="relative aspect-[366/729] relative mx-auto w-full max-w-[366px]">
              <div
                  class="absolute inset-y-[calc(1/729*100%)] left-[calc(7/729*100%)] right-[calc(5/729*100%)] rounded-[calc(58/366*100%)/calc(58/729*100%)] shadow-2xl"></div>
              <div
                  class="absolute left-[calc(23/366*100%)] top-[calc(23/729*100%)] grid h-[calc(686/729*100%)] w-[calc(318/366*100%)] transform grid-cols-1 overflow-hidden bg-gray-900 pt-[calc(23/318*100%)]">
                <div class="flex flex-col w-full">
                  <div class="flex justify-between px-4 pt-4">
                  </div>
                  <!--    here setting image for product              -->
                </div>
              </div>
              <svg viewBox="0 0 366 729" aria-hidden="true"
                   class="pointer-events-none absolute inset-0 h-full w-full fill-gray-100">
                <path fill="#F2F2F2" fill-rule="evenodd" clip-rule="evenodd"
                      d="M300.092 1c41.22 0 63.223 21.99 63.223 63.213V184.94c-.173.184-.329.476-.458.851.188-.282.404-.547.647-.791.844-.073 2.496.257 2.496 2.157V268.719c-.406 2.023-2.605 2.023-2.605 2.023a7.119 7.119 0 0 1-.08-.102v394.462c0 41.213-22.001 63.212-63.223 63.212h-95.074c-.881-.468-2.474-.795-4.323-.838l-33.704-.005-.049.001h-.231l-.141-.001c-2.028 0-3.798.339-4.745.843H66.751c-41.223 0-63.223-21.995-63.223-63.208V287.739c-.402-.024-2.165-.23-2.524-2.02v-.973A2.039 2.039 0 0 1 1 284.62v-47.611c0-.042.001-.084.004-.126v-.726c0-1.9 1.652-2.23 2.496-2.157l.028.028v-16.289c-.402-.024-2.165-.23-2.524-2.02v-.973A2.039 2.039 0 0 1 1 214.62v-47.611c0-.042.001-.084.004-.126v-.726c0-1.9 1.652-2.23 2.496-2.157l.028.028v-26.041a2.26 2.26 0 0 0 .093-.236l-.064-.01a3.337 3.337 0 0 1-.72-.12l-.166-.028A2 2 0 0 1 1 135.62v-24.611a2 2 0 0 1 1.671-1.973l.857-.143v-44.68C3.528 22.99 25.53 1 66.75 1h233.341ZM3.952 234.516a5.481 5.481 0 0 0-.229-.278c.082.071.159.163.228.278Zm89.99-206.304A4.213 4.213 0 0 0 89.727 24H56.864C38.714 24 24 38.708 24 56.852v618.296C24 693.292 38.714 708 56.864 708h250.272c18.15 0 32.864-14.708 32.864-32.852V56.852C340 38.708 325.286 24 307.136 24h-32.864a4.212 4.212 0 0 0-4.213 4.212v2.527c0 10.235-8.3 18.532-18.539 18.532H112.48c-10.239 0-18.539-8.297-18.539-18.532v-2.527Z"></path>
                <rect x="154" y="29" width="56" height="5" rx="2.5" fill="#D4D4D4"></rect>
              </svg>
              <img alt="" loading="lazy" width="366" height="729" decoding="async" data-nimg="1"
                   class="pointer-events-none absolute inset-0 h-full w-full" style="color:transparent"
                   src="../../../assets/images/phone-frame.d4b6b62a.svg"></div>
            <div class="absolute inset-x-0 bottom-0 bg-gray-800/95 p-6 backdrop-blur sm:p-10">
              <svg viewBox="0 0 32 32" aria-hidden="true" class="h-8 w-8">
                <circle cx="16" cy="16" r="16" fill="#A3A3A3" fill-opacity="0.2"></circle>
                <path fill-rule="evenodd" clip-rule="evenodd"
                      d="M16 23a3 3 0 100-6 3 3 0 000 6zm-1 2a4 4 0 00-4 4v1a2 2 0 002 2h6a2 2 0 002-2v-1a4 4 0 00-4-4h-2z"
                      fill="#737373"></path>
                <path fill-rule="evenodd" clip-rule="evenodd"
                      d="M5 4a4 4 0 014-4h14a4 4 0 014 4v24a4.002 4.002 0 01-3.01 3.877c-.535.136-.99-.325-.99-.877s.474-.98.959-1.244A2 2 0 0025 28V4a2 2 0 00-2-2h-1.382a1 1 0 00-.894.553l-.448.894a1 1 0 01-.894.553h-6.764a1 1 0 01-.894-.553l-.448-.894A1 1 0 0010.382 2H9a2 2 0 00-2 2v24a2 2 0 001.041 1.756C8.525 30.02 9 30.448 9 31s-.455 1.013-.99.877A4.002 4.002 0 015 28V4z"
                      fill="#A3A3A3"></path>
              </svg>
              <h3 class="mt-6 text-sm font-semibold text-white sm:text-lg"> 智能管家，全面掌控 </h3>
              <p class="mt-2 text-sm text-gray-400">AI云租系统为管家提供预约日程、签约管理、新房源录入、租客签约和房东委托功能，提升工作效率，简化管理流程。
              </p></div>
          </div>
        </div>
        <div class="w-full flex-none snap-center px-4 sm:px-6">
          <div class="relative transform overflow-hidden rounded-2xl bg-gray-800 px-5 py-6">
            <div class="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2">
              <svg viewBox="0 0 558 558" width="558" height="558" fill="none" aria-hidden="true" class="rotate-180">
                <defs>
                  <linearGradient id=":R1j57qfja:" x1="79" y1="16" x2="105" y2="237" gradientUnits="userSpaceOnUse">
                    <stop stop-color="#13B5C8"></stop>
                    <stop offset="1" stop-color="#13B5C8" stop-opacity="0"></stop>
                  </linearGradient>
                </defs>
                <path opacity=".2"
                      d="M1 279C1 125.465 125.465 1 279 1s278 124.465 278 278-124.465 278-278 278S1 432.535 1 279Z"
                      stroke="#13B5C8"></path>
                <path d="M1 279C1 125.465 125.465 1 279 1" stroke="url(#:R1j57qfja:)" stroke-linecap="round"></path>
              </svg>
            </div>
            <div class="relative aspect-[366/729] relative mx-auto w-full max-w-[366px]">
              <div
                  class="absolute inset-y-[calc(1/729*100%)] left-[calc(7/729*100%)] right-[calc(5/729*100%)] rounded-[calc(58/366*100%)/calc(58/729*100%)] shadow-2xl"></div>
              <div
                  class="absolute left-[calc(23/366*100%)] top-[calc(23/729*100%)] grid h-[calc(686/729*100%)] w-[calc(318/366*100%)] transform grid-cols-1 overflow-hidden bg-gray-900 pt-[calc(23/318*100%)]">
                <div class="flex flex-col w-full">
                  <div class="flex justify-between px-4 pt-4">
                    <svg viewBox="0 0 24 24" fill="none" aria-hidden="true" class="h-6 w-6 flex-none">
                      <path d="M5 6h14M5 18h14M5 12h14" stroke="#fff" stroke-width="2" stroke-linecap="round"
                            stroke-linejoin="round"></path>
                    </svg>
                    <svg viewBox="0 0 79 24" fill="none" aria-hidden="true" class="h-6 flex-none">
                      <path
                          d="M12 24C5.373 24 0 18.627 0 12S5.373 0 12 0s12 5.373 12 12-5.373 12-12 12ZM2.4 12a9.004 9.004 0 0 0 6.055 8.507c1.565.542 2.945-.85 2.945-2.507V6c0-1.657-1.38-3.049-2.945-2.507A9.004 9.004 0 0 0 2.4 12Z"
                          fill="#06B6D4"></path>
                      <path
                          d="M33.004 17V6.818h3.818c.783 0 1.439.146 1.97.438.533.291.935.692 1.207 1.203.275.507.413 1.084.413 1.73 0 .653-.138 1.233-.413 1.74a2.948 2.948 0 0 1-1.218 1.198c-.537.288-1.198.433-1.983.433h-2.531v-1.517h2.282c.457 0 .832-.08 1.124-.238.291-.16.507-.378.646-.657.142-.278.214-.598.214-.96 0-.36-.072-.679-.214-.954a1.452 1.452 0 0 0-.651-.641c-.292-.156-.668-.234-1.129-.234h-1.69V17h-1.845Zm12.152.15c-.746 0-1.392-.165-1.939-.493a3.343 3.343 0 0 1-1.273-1.377c-.298-.59-.447-1.28-.447-2.068 0-.79.15-1.48.447-2.073a3.335 3.335 0 0 1 1.273-1.383c.547-.328 1.193-.492 1.94-.492.745 0 1.391.164 1.938.492.547.329.97.79 1.268 1.383.301.593.452 1.284.452 2.073 0 .789-.15 1.478-.452 2.068a3.309 3.309 0 0 1-1.268 1.377c-.547.328-1.193.492-1.939.492Zm.01-1.443c.404 0 .742-.11 1.014-.333.272-.225.474-.527.607-.905.136-.377.204-.798.204-1.262 0-.468-.068-.89-.204-1.268a2.007 2.007 0 0 0-.607-.91c-.272-.225-.61-.338-1.014-.338-.414 0-.759.113-1.034.338a2.041 2.041 0 0 0-.612.91 3.81 3.81 0 0 0-.198 1.268c0 .464.066.885.198 1.262.136.378.34.68.612.905.275.222.62.333 1.034.333Zm8.508 1.442c-.763 0-1.417-.167-1.964-.502a3.352 3.352 0 0 1-1.258-1.387c-.292-.593-.437-1.276-.437-2.048 0-.776.149-1.46.447-2.054a3.34 3.34 0 0 1 1.263-1.392c.547-.334 1.193-.502 1.939-.502.62 0 1.168.115 1.645.343.48.226.864.546 1.149.96.285.41.447.891.487 1.441h-1.72a1.644 1.644 0 0 0-.497-.92c-.259-.248-.605-.372-1.04-.372-.367 0-.69.1-.969.298-.278.196-.495.478-.651.845-.153.368-.229.81-.229 1.323 0 .52.076.968.229 1.342.152.371.366.658.641.86.279.2.605.298.98.298.265 0 .502-.05.71-.149.213-.102.39-.25.532-.442.143-.192.24-.426.294-.701h1.72a2.999 2.999 0 0 1-.477 1.437c-.275.414-.65.739-1.124.974-.474.232-1.03.348-1.67.348Zm6.39-2.545-.006-2.173h.289l2.744-3.067h2.103l-3.376 3.758h-.372l-1.383 1.482ZM58.422 17V6.818h1.8V17h-1.8Zm4.792 0-2.485-3.475 1.213-1.268L65.368 17h-2.153Zm6.245.15c-.766 0-1.427-.16-1.984-.478a3.233 3.233 0 0 1-1.278-1.362c-.298-.59-.447-1.285-.447-2.083 0-.786.149-1.475.447-2.069a3.384 3.384 0 0 1 1.263-1.392c.54-.334 1.175-.502 1.904-.502.47 0 .915.076 1.333.229.42.149.792.381 1.113.696.325.315.58.716.766 1.203.186.484.278 1.06.278 1.73v.552h-6.259v-1.213h4.534a1.935 1.935 0 0 0-.224-.92 1.625 1.625 0 0 0-.611-.641 1.719 1.719 0 0 0-.905-.234c-.368 0-.691.09-.97.269a1.848 1.848 0 0 0-.65.696c-.153.285-.231.598-.234.94v1.058c0 .444.08.825.243 1.144.163.315.39.556.681.726.292.165.634.248 1.025.248.261 0 .498-.036.71-.11.213-.075.397-.187.552-.332.156-.146.274-.327.353-.542l1.68.189a2.62 2.62 0 0 1-.606 1.163 2.958 2.958 0 0 1-1.133.766c-.461.179-.988.268-1.581.268Zm8.731-7.786v1.392h-4.39V9.364h4.39Zm-3.306-1.83h1.8v7.17c0 .241.036.427.109.556a.59.59 0 0 0 .298.258c.123.047.259.07.408.07.113 0 .215-.008.308-.025.096-.016.17-.031.219-.045l.303 1.407c-.096.034-.233.07-.412.11-.176.04-.392.063-.647.07a2.934 2.934 0 0 1-1.218-.204 1.895 1.895 0 0 1-.86-.706c-.209-.319-.311-.716-.308-1.194V7.534Z"
                          fill="#fff"></path>
                    </svg>
                    <svg viewBox="0 0 24 24" fill="none" aria-hidden="true" class="h-6 w-6 flex-none">
                      <path
                          d="M15 8a3 3 0 1 1-6 0 3 3 0 0 1 6 0ZM6.696 19h10.608c1.175 0 2.08-.935 1.532-1.897C18.028 15.69 16.187 14 12 14s-6.028 1.689-6.836 3.103C4.616 18.065 5.521 19 6.696 19Z"
                          stroke="#fff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
                    </svg>
                  </div>
                  <div class="mt-6 px-4 text-white">
                    <div class="text-2xl text-white">Stocks</div>
                    <div class="text-sm text-gray-500">March 9, 2022</div>
                  </div>
                  <div class="mt-6 flex-auto rounded-t-2xl bg-white">
                    <div class="divide-y divide-gray-100">
                      <div class="flex items-center gap-4 px-4 py-3">
                        <div class="flex-none rounded-full" style="background-color:#F9322C">
                          <svg viewBox="0 0 40 40" fill="#fff" aria-hidden="true" class="h-10 w-10">
                            <path fill-rule="evenodd" clip-rule="evenodd"
                                  d="M29.982 14.509c.002.005.006.01.007.015a.316.316 0 0 1 .011.082v4.293a.304.304 0 0 1-.043.156.32.32 0 0 1-.119.115l-3.709 2.075v4.112a.305.305 0 0 1-.043.157.32.32 0 0 1-.119.114l-7.742 4.33a.286.286 0 0 1-.056.023l-.022.008a.33.33 0 0 1-.18-.005l-.01-.005c-.018-.006-.036-.011-.053-.021l-7.742-4.33a.32.32 0 0 1-.119-.115.304.304 0 0 1-.043-.156v-12.88a.33.33 0 0 1 .01-.08c.004-.01.01-.018.012-.027l.01-.027a.158.158 0 0 1 .011-.022c.006-.01.015-.018.023-.028.009-.012.017-.025.028-.036.01-.01.02-.016.031-.024.012-.009.023-.019.036-.026l3.871-2.165a.33.33 0 0 1 .322 0l3.872 2.165c.013.007.024.017.036.026l.01.008c.008.005.015.01.021.016a.175.175 0 0 1 .021.025l.008.011.022.028c.008.015.014.032.02.049l.006.01.006.016a.307.307 0 0 1 .01.082v8.044l3.227-1.804v-4.112c0-.028.004-.055.011-.082.003-.01.008-.017.011-.026l.004-.01a.228.228 0 0 1 .017-.039.132.132 0 0 1 .013-.018.203.203 0 0 0 .01-.01c.009-.012.017-.025.028-.036l.015-.013.016-.01.019-.016a.126.126 0 0 1 .017-.011l3.871-2.165a.33.33 0 0 1 .322 0l3.871 2.165c.014.007.024.018.036.026l.012.008.02.016a.162.162 0 0 1 .02.026l.009.01.008.01c.005.006.01.012.013.018a.254.254 0 0 1 .018.04l.003.009.005.01Zm-15.138 8.717 3.22 1.77 7.094-3.933-3.223-1.803-7.091 3.966Zm10.64-2.704v-3.57l-3.226-1.804v3.57l3.225 1.804Zm3.547-5.916-3.225-1.803-3.224 1.803 3.224 1.803 3.225-1.803Zm-14.515.218v7.863l3.226-1.805V13.02l-3.226 1.804Zm2.902-2.346-3.225-1.803-3.224 1.803 3.224 1.803 3.225-1.803Zm-3.547 2.347-3.226-1.805v12.155l7.098 3.97V25.54l-3.708-2.038h-.001l-.002-.002c-.013-.008-.024-.018-.035-.027a.28.28 0 0 0-.011-.007.133.133 0 0 1-.02-.015v-.001l-.019-.022a.452.452 0 0 0-.008-.011l-.016-.02a.086.086 0 0 1-.008-.01v-.002a.123.123 0 0 1-.013-.027l-.005-.012-.008-.016a.115.115 0 0 1-.007-.02.18.18 0 0 1-.005-.033l-.002-.013a.293.293 0 0 0-.002-.013l-.002-.022v-8.405Zm4.516 10.715v3.605l7.096-3.969v-3.572l-7.096 3.935Zm7.742-5.019 3.226-1.804v-3.57l-3.226 1.805v3.57Z"></path>
                          </svg>
                        </div>
                        <div class="flex-auto text-sm text-gray-900">Laravel</div>
                        <div class="flex-none text-right">
                          <div class="text-sm font-medium text-gray-900">4,098.01</div>
                          <div class="text-xs leading-5 text-cyan-500">+4.98%</div>
                        </div>
                      </div>
                      <div class="flex items-center gap-4 px-4 py-3">
                        <div class="flex-none rounded-full" style="background-color:#5A67D8">
                          <svg viewBox="0 0 40 40" fill="#fff" aria-hidden="true" class="h-10 w-10">
                            <path fill-rule="evenodd" clip-rule="evenodd"
                                  d="M22.5 8 12 11.692v12l3.5 1.231v3.385L26 32V12.615l-3.5 1.231V8Zm-5.833 17.334 5.833 2.05v-12.24l2.333-.82v15.968l-8.166-2.87v-2.088Z"></path>
                          </svg>
                        </div>
                        <div class="flex-auto text-sm text-gray-900">Tuple</div>
                        <div class="flex-none text-right">
                          <div class="text-sm font-medium text-gray-900">5,451.10</div>
                          <div class="text-xs leading-5 text-gray-500">-3.38%</div>
                        </div>
                      </div>
                      <div class="flex items-center gap-4 px-4 py-3">
                        <div class="flex-none rounded-full" style="background-color:#2A5B94">
                          <svg viewBox="0 0 40 40" fill="#fff" aria-hidden="true" class="h-10 w-10">
                            <path
                                d="M20 32c-6.617 0-12-5.383-12-12S13.383 8 20 8s12 5.383 12 12-5.383 12-12 12Zm0-22.4C14.267 9.6 9.6 14.266 9.6 20S14.267 30.4 20 30.4c5.734 0 10.4-4.666 10.4-10.4S25.734 9.6 20 9.6Z"></path>
                            <path
                                d="M19.434 27.749c.15.15.354.234.566.235.433 0 .8-.368.8-.8V12.815a.8.8 0 0 0-1.6 0v14.368c0 .212.084.415.234.565ZM12.833 20.8h3.833a.802.802 0 0 0 .802-.8.8.8 0 0 0-.801-.8h-3.834c-.45 0-.8.35-.8.8a.8.8 0 0 0 .8.8ZM23.333 20.8h3.85c.433 0 .783-.35.783-.8a.799.799 0 0 0-.8-.8h-3.833c-.45 0-.8.35-.8.8a.8.8 0 0 0 .8.8Z"></path>
                          </svg>
                        </div>
                        <div class="flex-auto text-sm text-gray-900">Transistor</div>
                        <div class="flex-none text-right">
                          <div class="text-sm font-medium text-gray-900">4,098.41</div>
                          <div class="text-xs leading-5 text-cyan-500">+6.25%</div>
                        </div>
                      </div>
                      <div class="flex items-center gap-4 px-4 py-3">
                        <div class="flex-none rounded-full" style="background-color:#3320A7">
                          <svg viewBox="0 0 40 40" fill="#fff" stroke="#fff" stroke-width="2" stroke-linecap="round"
                               stroke-linejoin="round" aria-hidden="true" class="h-10 w-10">
                            <path d="M22.16 19 26 13H14l3.84 6" fill="none"></path>
                            <path d="M25 24a5 5 0 1 1-10 0 5 5 0 0 1 10 0Z"></path>
                          </svg>
                        </div>
                        <div class="flex-auto text-sm text-gray-900">Diageo</div>
                        <div class="flex-none text-right">
                          <div class="text-sm font-medium text-gray-900">250.65</div>
                          <div class="text-xs leading-5 text-cyan-500">+1.25%</div>
                        </div>
                      </div>
                      <div class="flex items-center gap-4 px-4 py-3">
                        <div class="flex-none rounded-full" style="background-color:#2A3034">
                          <svg viewBox="0 0 40 40" fill="#fff" aria-hidden="true" class="h-10 w-10">
                            <path
                                d="m26.068 10.555-11.49 13.089L12 21.089 23.489 8l2.58 2.555ZM28 18.91 16.512 32l-2.579-2.555 11.489-13.089L28 18.911Z"></path>
                          </svg>
                        </div>
                        <div class="flex-auto text-sm text-gray-900">StaticKit</div>
                        <div class="flex-none text-right">
                          <div class="text-sm font-medium text-gray-900">250.65</div>
                          <div class="text-xs leading-5 text-gray-500">-3.38%</div>
                        </div>
                      </div>
                      <div class="flex items-center gap-4 px-4 py-3">
                        <div class="flex-none rounded-full" style="background-color:#0EA5E9">
                          <svg viewBox="0 0 40 40" fill="#fff" aria-hidden="true" class="h-10 w-10">
                            <path fill-rule="evenodd" clip-rule="evenodd"
                                  d="M30.177 27.293c0 1.921-.644 2.707-2.398 2.707H12.22c-1.754 0-2.397-.786-2.397-2.707v-3.741c0-1.805-.837-2.824-1.642-3.291a.385.385 0 0 1-.133-.143.403.403 0 0 1 .133-.526c.837-.551 1.642-1.704 1.642-3.241v-3.677c0-2.072.547-2.674 2.3-2.674h15.754c1.754 0 2.3.602 2.3 2.674v3.675c0 1.537.805 2.69 1.641 3.24.243.168.243.52 0 .67-.804.484-1.64 1.503-1.64 3.29v3.743h-.001Zm-14.739-2.455c1.271 1.152 2.64 1.737 4.522 1.737 2.96 0 4.891-1.537 4.891-4.026 0-2.637-2.3-3.31-4.17-3.856-1.282-.375-2.363-.691-2.363-1.54 0-.551.564-1.086 1.513-1.086.917 0 1.674.2 2.397.584.242.117.467.2.676.2.306 0 .547-.15.756-.45l.29-.451a.955.955 0 0 0 .161-.55c0-.336-.161-.67-.402-.837-.966-.635-2.27-1.17-4.039-1.17-2.51 0-4.44 1.37-4.44 3.826 0 2.746 2.349 3.443 4.23 4h.001c1.255.372 2.3.681 2.3 1.497 0 .785-.707 1.17-1.592 1.17a5.19 5.19 0 0 1-2.992-.92c-.274-.183-.532-.3-.805-.3-.242 0-.451.117-.644.368l-.387.517a.888.888 0 0 0-.192.585c0 .25.08.501.29.702Z"></path>
                          </svg>
                        </div>
                        <div class="flex-auto text-sm text-gray-900">Statamic</div>
                        <div class="flex-none text-right">
                          <div class="text-sm font-medium text-gray-900">5,040.85</div>
                          <div class="text-xs leading-5 text-gray-500">-3.11%</div>
                        </div>
                      </div>
                      <div class="flex items-center gap-4 px-4 py-3">
                        <div class="flex-none rounded-full" style="background-color:#16A34A">
                          <svg viewBox="0 0 40 40" fill="#fff" aria-hidden="true" class="h-10 w-10">
                            <path fill-rule="evenodd" clip-rule="evenodd"
                                  d="M24.05 9c2.307 0 4.177 1.885 4.177 4.21a4.21 4.21 0 0 1-2.762 3.964l3.366 6.057h2.304c.355 0 .642.29.642.647a.645.645 0 0 1-.642.647H7.142a.645.645 0 0 1-.642-.647c0-.358.288-.647.643-.647h2.304l5.994-10.747a.641.641 0 0 1 1.097-.036l3.444 5.32 1.071-1.627a4.214 4.214 0 0 1-1.178-2.93c0-2.326 1.87-4.211 4.176-4.211Zm-3.304 9.948 2.772 4.283h3.84l-4.317-7.769-2.295 3.486Zm1.239 4.283-5.944-9.183-5.121 9.183h11.065Zm5.038-10.02a2.995 2.995 0 0 1-2.159 2.883l-1.216-2.19a.64.64 0 0 0-1.096-.04l-.811 1.232a3 3 0 0 1-.663-1.885c0-1.655 1.332-2.997 2.973-2.997 1.641 0 2.972 1.341 2.972 2.997Z"></path>
                            <path
                                d="M12.069 26.469c-.354 0-.641.289-.641.646 0 .358.287.646.64.646h14.139c.354 0 .641-.29.641-.646a.644.644 0 0 0-.64-.646h-14.14Zm4.928 3.236a.645.645 0 0 0-.642.648c0 .357.288.647.642.647h4.282c.355 0 .643-.29.643-.647a.645.645 0 0 0-.643-.648h-4.282Z"></path>
                          </svg>
                        </div>
                        <div class="flex-auto text-sm text-gray-900">Mirage</div>
                        <div class="flex-none text-right">
                          <div class="text-sm font-medium text-gray-900">140.44</div>
                          <div class="text-xs leading-5 text-cyan-500">+9.09%</div>
                        </div>
                      </div>
                      <div class="flex items-center gap-4 px-4 py-3">
                        <div class="flex-none rounded-full" style="background-color:#8D8D8D">
                          <svg viewBox="0 0 40 40" fill="none" stroke="#fff" stroke-width="2"
                               stroke-linecap="square" stroke-linejoin="round" aria-hidden="true" class="h-10 w-10">
                            <path
                                d="M15 26v-5.25m0 0V16a2 2 0 0 1 2-2h4.21c.968 0 1.37 1.24.587 1.809L15 20.75Zm0 0L25 26"></path>
                          </svg>
                        </div>
                        <div class="flex-auto text-sm text-gray-900">Reversable</div>
                        <div class="flex-none text-right">
                          <div class="text-sm font-medium text-gray-900">550.60</div>
                          <div class="text-xs leading-5 text-gray-500">-1.25%</div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <svg viewBox="0 0 366 729" aria-hidden="true"
                   class="pointer-events-none absolute inset-0 h-full w-full fill-gray-100">
                <path fill="#F2F2F2" fill-rule="evenodd" clip-rule="evenodd"
                      d="M300.092 1c41.22 0 63.223 21.99 63.223 63.213V184.94c-.173.184-.329.476-.458.851.188-.282.404-.547.647-.791.844-.073 2.496.257 2.496 2.157V268.719c-.406 2.023-2.605 2.023-2.605 2.023a7.119 7.119 0 0 1-.08-.102v394.462c0 41.213-22.001 63.212-63.223 63.212h-95.074c-.881-.468-2.474-.795-4.323-.838l-33.704-.005-.049.001h-.231l-.141-.001c-2.028 0-3.798.339-4.745.843H66.751c-41.223 0-63.223-21.995-63.223-63.208V287.739c-.402-.024-2.165-.23-2.524-2.02v-.973A2.039 2.039 0 0 1 1 284.62v-47.611c0-.042.001-.084.004-.126v-.726c0-1.9 1.652-2.23 2.496-2.157l.028.028v-16.289c-.402-.024-2.165-.23-2.524-2.02v-.973A2.039 2.039 0 0 1 1 214.62v-47.611c0-.042.001-.084.004-.126v-.726c0-1.9 1.652-2.23 2.496-2.157l.028.028v-26.041a2.26 2.26 0 0 0 .093-.236l-.064-.01a3.337 3.337 0 0 1-.72-.12l-.166-.028A2 2 0 0 1 1 135.62v-24.611a2 2 0 0 1 1.671-1.973l.857-.143v-44.68C3.528 22.99 25.53 1 66.75 1h233.341ZM3.952 234.516a5.481 5.481 0 0 0-.229-.278c.082.071.159.163.228.278Zm89.99-206.304A4.213 4.213 0 0 0 89.727 24H56.864C38.714 24 24 38.708 24 56.852v618.296C24 693.292 38.714 708 56.864 708h250.272c18.15 0 32.864-14.708 32.864-32.852V56.852C340 38.708 325.286 24 307.136 24h-32.864a4.212 4.212 0 0 0-4.213 4.212v2.527c0 10.235-8.3 18.532-18.539 18.532H112.48c-10.239 0-18.539-8.297-18.539-18.532v-2.527Z"></path>
                <rect x="154" y="29" width="56" height="5" rx="2.5" fill="#D4D4D4"></rect>
              </svg>
              <img alt="" loading="lazy" width="366" height="729" decoding="async" data-nimg="1"
                   class="pointer-events-none absolute inset-0 h-full w-full" style="color:transparent"
                   src="../../../assets/images/phone-frame.d4b6b62a.svg"></div>
            <div class="absolute inset-x-0 bottom-0 bg-gray-800/95 p-6 backdrop-blur sm:p-10">
              <svg viewBox="0 0 32 32" aria-hidden="true" class="h-8 w-8">
                <circle cx="16" cy="16" r="16" fill="#A3A3A3" fill-opacity="0.2"></circle>
                <path fill-rule="evenodd" clip-rule="evenodd"
                      d="M9 0a4 4 0 00-4 4v24a4 4 0 004 4h14a4 4 0 004-4V4a4 4 0 00-4-4H9zm0 2a2 2 0 00-2 2v24a2 2 0 002 2h14a2 2 0 002-2V4a2 2 0 00-2-2h-1.382a1 1 0 00-.894.553l-.448.894a1 1 0 01-.894.553h-6.764a1 1 0 01-.894-.553l-.448-.894A1 1 0 0010.382 2H9z"
                      fill="#A3A3A3"></path>
                <path d="M9 8a2 2 0 012-2h10a2 2 0 012 2v2a2 2 0 01-2 2H11a2 2 0 01-2-2V8z" fill="#737373"></path>
              </svg>
              <h3 class="mt-6 text-sm font-semibold text-white sm:text-lg">租客端</h3>
              <p class="mt-2 text-sm text-gray-400">个性化推荐和便捷预订，让您享受舒适的入住体验。</p></div>
          </div>
        </div>
        <div class="w-full flex-none snap-center px-4 sm:px-6">
          <div class="relative transform overflow-hidden rounded-2xl bg-gray-800 px-5 py-6">
            <div class="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2">
              <svg viewBox="0 0 558 558" width="558" height="558" fill="none" aria-hidden="true">
                <defs>
                  <linearGradient id=":R1r57qfja:" x1="79" y1="16" x2="105" y2="237" gradientUnits="userSpaceOnUse">
                    <stop stop-color="#13B5C8"></stop>
                    <stop offset="1" stop-color="#13B5C8" stop-opacity="0"></stop>
                  </linearGradient>
                </defs>
                <path opacity=".2"
                      d="M1 279C1 125.465 125.465 1 279 1s278 124.465 278 278-124.465 278-278 278S1 432.535 1 279Z"
                      stroke="#13B5C8"></path>
                <path d="M1 279C1 125.465 125.465 1 279 1" stroke="url(#:R1r57qfja:)" stroke-linecap="round"></path>
              </svg>
            </div>
            <div class="relative aspect-[366/729] relative mx-auto w-full max-w-[366px]">
              <div
                  class="absolute inset-y-[calc(1/729*100%)] left-[calc(7/729*100%)] right-[calc(5/729*100%)] rounded-[calc(58/366*100%)/calc(58/729*100%)] shadow-2xl"></div>
              <div
                  class="absolute left-[calc(23/366*100%)] top-[calc(23/729*100%)] grid h-[calc(686/729*100%)] w-[calc(318/366*100%)] transform grid-cols-1 overflow-hidden bg-gray-900 pt-[calc(23/318*100%)]">
                <div class="flex flex-col w-full">
                  <div class="flex justify-between px-4 pt-4">
                  </div>
                  <div class="mt-6 px-4 text-white">
                    <div class="text-2xl text-white">Buy $LA</div>
                    <div class="text-sm text-gray-500"><span class="text-white">$34.28</span> per share</div>
                  </div>
                  <div class="mt-6 flex-auto rounded-t-2xl bg-white">
                    <div class="px-4 py-6">
                      <div class="space-y-4">
                        <div class="flex justify-between border-b border-gray-100 pb-4">
                          <div class="text-sm text-gray-500">Number of shares</div>
                          <div class="text-sm font-semibold text-gray-900">100</div>
                        </div>
                        <div class="flex justify-between border-b border-gray-100 pb-4">
                          <div class="text-sm text-gray-500">Current market price</div>
                          <div class="text-sm font-semibold text-gray-900">
                            <div class="flex">$34.28
                              <svg viewBox="0 0 24 24" fill="none" class="h-6 w-6">
                                <path d="M17 15V7H9M17 7 7 17" stroke="#06B6D4" stroke-width="2"
                                      stroke-linecap="round" stroke-linejoin="round"></path>
                              </svg>
                            </div>
                          </div>
                        </div>
                        <div class="flex justify-between border-b border-gray-100 pb-4">
                          <div class="text-sm text-gray-500">Estimated cost</div>
                          <div class="text-sm font-semibold text-gray-900">$3,428.00</div>
                        </div>
                        <div class="rounded-lg bg-cyan-500 px-3 py-2 text-center text-sm font-semibold text-white">
                          Buy shares
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <svg viewBox="0 0 366 729" aria-hidden="true"
                   class="pointer-events-none absolute inset-0 h-full w-full fill-gray-100">
                <path fill="#F2F2F2" fill-rule="evenodd" clip-rule="evenodd"
                      d="M300.092 1c41.22 0 63.223 21.99 63.223 63.213V184.94c-.173.184-.329.476-.458.851.188-.282.404-.547.647-.791.844-.073 2.496.257 2.496 2.157V268.719c-.406 2.023-2.605 2.023-2.605 2.023a7.119 7.119 0 0 1-.08-.102v394.462c0 41.213-22.001 63.212-63.223 63.212h-95.074c-.881-.468-2.474-.795-4.323-.838l-33.704-.005-.049.001h-.231l-.141-.001c-2.028 0-3.798.339-4.745.843H66.751c-41.223 0-63.223-21.995-63.223-63.208V287.739c-.402-.024-2.165-.23-2.524-2.02v-.973A2.039 2.039 0 0 1 1 284.62v-47.611c0-.042.001-.084.004-.126v-.726c0-1.9 1.652-2.23 2.496-2.157l.028.028v-16.289c-.402-.024-2.165-.23-2.524-2.02v-.973A2.039 2.039 0 0 1 1 214.62v-47.611c0-.042.001-.084.004-.126v-.726c0-1.9 1.652-2.23 2.496-2.157l.028.028v-26.041a2.26 2.26 0 0 0 .093-.236l-.064-.01a3.337 3.337 0 0 1-.72-.12l-.166-.028A2 2 0 0 1 1 135.62v-24.611a2 2 0 0 1 1.671-1.973l.857-.143v-44.68C3.528 22.99 25.53 1 66.75 1h233.341ZM3.952 234.516a5.481 5.481 0 0 0-.229-.278c.082.071.159.163.228.278Zm89.99-206.304A4.213 4.213 0 0 0 89.727 24H56.864C38.714 24 24 38.708 24 56.852v618.296C24 693.292 38.714 708 56.864 708h250.272c18.15 0 32.864-14.708 32.864-32.852V56.852C340 38.708 325.286 24 307.136 24h-32.864a4.212 4.212 0 0 0-4.213 4.212v2.527c0 10.235-8.3 18.532-18.539 18.532H112.48c-10.239 0-18.539-8.297-18.539-18.532v-2.527Z"></path>
                <rect x="154" y="29" width="56" height="5" rx="2.5" fill="#D4D4D4"></rect>
              </svg>
              <img alt="" loading="lazy" width="366" height="729" decoding="async" data-nimg="1"
                   class="pointer-events-none absolute inset-0 h-full w-full" style="color:transparent"
                   src="../../../assets/images/phone-frame.d4b6b62a.svg"></div>
            <div class="absolute inset-x-0 bottom-0 bg-gray-800/95 p-6 backdrop-blur sm:p-10">
              <svg viewBox="0 0 32 32" fill="none" aria-hidden="true" class="h-8 w-8">
                <defs>
                  <linearGradient id=":R7r57qfja:-gradient" x1="14" y1="14.5" x2="7" y2="17"
                                  gradientUnits="userSpaceOnUse">
                    <stop stop-color="#737373"></stop>
                    <stop offset="1" stop-color="#D4D4D4" stop-opacity="0"></stop>
                  </linearGradient>
                </defs>
                <circle cx="16" cy="16" r="16" fill="#A3A3A3" fill-opacity="0.2"></circle>
                <path fill-rule="evenodd" clip-rule="evenodd"
                      d="M5 4a4 4 0 014-4h14a4 4 0 014 4v13h-2V4a2 2 0 00-2-2h-1.382a1 1 0 00-.894.553l-.448.894a1 1 0 01-.894.553h-6.764a1 1 0 01-.894-.553l-.448-.894A1 1 0 0010.382 2H9a2 2 0 00-2 2v24a2 2 0 002 2h4v2H9a4 4 0 01-4-4V4z"
                      fill="#A3A3A3"></path>
                <path d="M7 22c0-4.694 3.5-8 8-8" stroke="url(#:R7r57qfja:-gradient)" stroke-width="2"
                      stroke-linecap="round" stroke-linejoin="round"></path>
                <path
                    d="M21 20l.217-5.513a1.431 1.431 0 00-2.85-.226L17.5 21.5l-1.51-1.51a2.107 2.107 0 00-2.98 0 .024.024 0 00-.005.024l3.083 9.25A4 4 0 0019.883 32H25a4 4 0 004-4v-5a3 3 0 00-3-3h-5z"
                    fill="#A3A3A3"></path>
              </svg>
              <h3 class="mt-6 text-sm font-semibold text-white sm:text-lg">房东端</h3>
              <p class="mt-2 text-sm text-gray-400">实时数据分析和智能定价，帮助您优化管理和最大化收益。</p></div>
          </div>
        </div>
      </div>
    </div>
    <div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8 hidden md:mt-20 md:block">
      <div class="grid grid-cols-12 items-center gap-8 lg:gap-16 xl:gap-24">
        <div class="relative z-10 order-last col-span-6 space-y-6" role="tablist" aria-orientation="vertical">
          <div class="relative rounded-2xl transition-colors hover:bg-gray-800/30">
            <div class="absolute inset-0 bg-gray-800" style="border-radius: 16px; opacity: 1;"></div>
            <div class="relative z-10 p-8">
              <h3 class="mt-6 text-lg font-semibold text-white">
                <button class="text-left ui-not-focus-visible:outline-none" id="headlessui-tabs-tab-:R19dl7qfja:"
                        role="tab" type="button" aria-selected="true" tabindex="0" data-headlessui-state="selected"
                        data-selected="" aria-controls="headlessui-tabs-panel-:R3all7qfja:">
                  <span class="absolute inset-0 rounded-2xl"></span> 智能管家，全面掌控
                </button>
              </h3>
              <p class="mt-2 text-sm text-gray-400">
                AI云租系统为管家提供预约日程、签约管理、新房源录入、租客签约和房东委托功能，提升工作效率，简化管理流程。</p>
            </div>
          </div>
          <div class="relative rounded-2xl transition-colors hover:bg-gray-800/30">
            <div class="relative z-10 p-8">
              <h3 class="mt-6 text-lg font-semibold text-white">
                <button class="text-left ui-not-focus-visible:outline-none" id="headlessui-tabs-tab-:R1adl7qfja:"
                        role="tab" type="button" aria-selected="false" tabindex="-1" data-headlessui-state=""><span
                    class="absolute inset-0 rounded-2xl"></span>安全省心，智能管理
                </button>
              </h3>
              <p class="mt-2 text-sm text-gray-400">
                房东端提供安全、省心的管理体验，随时查看房态、房价、订单、房屋维修和清洁情况，让您轻松掌控一切。</p></div>
          </div>
          <div class="relative rounded-2xl transition-colors hover:bg-gray-800/30">
            <div class="relative z-10 p-8">
              <h3 class="mt-6 text-lg font-semibold text-white">
                <button class="text-left ui-not-focus-visible:outline-none" id="headlessui-tabs-tab-:R1bdl7qfja:"
                        role="tab" type="button" aria-selected="false" tabindex="-1" data-headlessui-state=""><span
                    class="absolute inset-0 rounded-2xl"></span>便捷租房，舒心体验
                </button>
              </h3>
              <p class="mt-2 text-sm text-gray-400">
                租客端提供实时查看价格和地理位置的功能，支持长租、短租和时租选择，随时看房，并享受贴心的管家服务，带来便捷舒心的租房体验。</p>
            </div>
          </div>
        </div>
        <div class="relative col-span-6">
          <div class="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2">
            <svg viewBox="0 0 558 558" width="558" height="558" fill="none" aria-hidden="true"
                 class="animate-spinSlower">
              <defs>
                <linearGradient id=":R1ll7qfja:" x1="79" y1="16" x2="105" y2="237" gradientUnits="userSpaceOnUse">
                  <stop stop-color="#13B5C8"></stop>
                  <stop offset="1" stop-color="#13B5C8" stop-opacity="0"></stop>
                </linearGradient>
              </defs>
              <path opacity=".2"
                    d="M1 279C1 125.465 125.465 1 279 1s278 124.465 278 278-124.465 278-278 278S1 432.535 1 279Z"
                    stroke="#13B5C8"></path>
              <path d="M1 279C1 125.465 125.465 1 279 1" stroke="url(#:R1ll7qfja:)" stroke-linecap="round"></path>
            </svg>
          </div>
          <div class="relative aspect-[366/729] z-10 mx-auto w-full max-w-[366px]">
            <div
                class="absolute left-[calc(23/366*100%)] top-[calc(23/729*100%)] grid h-[calc(686/729*100%)] w-[calc(318/366*100%)] transform grid-cols-1 overflow-hidden bg-gray-900 pt-[calc(23/318*100%)]">
              <div class="col-start-1 row-start-1 flex focus:outline-offset-[32px] ui-not-focus-visible:outline-none"
                   id="headlessui-tabs-panel-:R3all7qfja:" role="tabpanel" tabindex="0" data-headlessui-state="selected"
                   data-selected="" aria-labelledby="headlessui-tabs-tab-:R19dl7qfja:">
                <div class="flex flex-col w-full">
                  <div class="flex justify-between px-4 pt-4">
                    <svg viewBox="0 0 24 24" fill="none" aria-hidden="true" class="h-6 w-6 flex-none">
                      <path d="M5 6h14M5 18h14M5 12h14" stroke="#fff" stroke-width="2" stroke-linecap="round"
                            stroke-linejoin="round"></path>
                    </svg>
                    <span class="font-bold">稻客云租</span>
                    <svg viewBox="0 0 24 24" fill="none" aria-hidden="true" class="h-6 w-6 flex-none">
                      <path
                          d="M15 8a3 3 0 1 1-6 0 3 3 0 0 1 6 0ZM6.696 19h10.608c1.175 0 2.08-.935 1.532-1.897C18.028 15.69 16.187 14 12 14s-6.028 1.689-6.836 3.103C4.616 18.065 5.521 19 6.696 19Z"
                          stroke="#fff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
                    </svg>
                  </div>
                </div>
              </div>
            </div>
            <img alt="" loading="lazy" width="366" height="729" decoding="async" data-nimg="1"
                 class="pointer-events-none absolute inset-0 h-full w-full" style="color:transparent"
                 src="../../../assets/images/phone-frame.d4b6b62a.svg"></div>
        </div>
      </div>
    </div>
  </section>

</template>

<style scoped lang="less">

</style>
